<template>
  <CognPupop title="选择服务机构" :visible="visible" @confirm="visible = false" @cancel="visible = false">
    <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
      <picker-view-column>
        <view class="item" v-for="(item, index) in list" :key="index">{{ item.name }}</view>
      </picker-view-column>
    </picker-view>
  </CognPupop>
</template>


<script>
import CognPupop from "@/improve/components/CognPupop/CognPupop.vue";
export default {
  name: "UploadImg",
  components: { CognPupop },
  data() {
    return {
      visible: false,
      indicatorStyle: `height: 50px;color: #37B874;fontWeight: bold;`,
      list: [{
        name: '北京',
        code: '1'
      }, {
        name: '上海',
        code: '2'
      },{
        name: '上海',
        code: '2'
      },{
        name: '上海',
        code: '2'
      },{
        name: '上海',
        code: '2'
      }],
      value: [1]
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    bindChange(e) {
      const val = e.detail.value
      console.log(val)
    }
  }
}
</script>

<style scoped>
.picker-view {
  width: 750rpx;
  height: 225rpx;
}

.item {
  height: 50px;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 50px;
}
</style>